<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ include file="/jsp/common/common.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>手机报菜界面</title>
<link rel="stylesheet" type="text/css"
	href="<c:url value="/static/jquery-easyui-1.5.3/themes/default/easyui.css"/>">
<link rel="stylesheet" type="text/css"
	href="<c:url value="/static/jquery-easyui-1.5.3/themes/icon.css"/>">
<link rel="stylesheet"
	href="<c:url value="/jsp-mobile/select/css/jquery-accordion-menu.css"/>">
<!-- CSS reset -->
<link rel="stylesheet"
	href="<c:url value="/css_font/fonts/iconfont.css"/>">
<link rel="stylesheet"
	href="<c:url value="/jsp/cashier/css/style.css"/>">
<!-- Resource style -->
<!-- Modernizr -->

<script type="text/javascript"
	src="<c:url value="/jsp/cashier/js/jquery-1.11.2.min.js"/>"></script>
<script src="<c:url value="/jsp/cashier/js/jquery-accordion-menu.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui-1.5.3/jquery.easyui.min.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/plugins/jquery.panel.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/plugins/jquery.datagrid.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/plugins/jquery.messager.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/ext-for-framework.js.jsp"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/jquery-easyui/locale/easyui-lang-zh_CN.js"/>"></script>
<script type="text/javascript"
	src="<c:url value="/static/js/common.js"/>"></script>

<style type="text/css">

.look1_out {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 80%;
	padding: 0px;
	overflow: hidden;
	background: #fbfbfb;
}

.look1 {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	overflow-y: scroll;
	background: #fbfbfb;
}

/* .shopping_cart_date {
    position: fixed;
    left: 0;
    top: 75%;
    width: 100%;
    height: 5%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background: orange;
    vertical-align: middle;
} */
.shopping_cart_finish {
    position: fixed;
    left: 0;
    top: 80%;
    width: 100%;
    height: 10%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background: red;
    
}
.shopping_cart {
	position: fixed;
	left: 0;
	top: 90%;
	width: 100%;
	height: 10%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	background: #d4fc74;
}

.products {
	list-style: none;
	margin-right: 2px;
	padding: 0px;
	height: 100%;
	width: 100%;
	text-align: center;
}

.products li {
	display: block;
	width: 100%;
	float: left;
	margin: 0px;
	background: #fbfbfb;
	border-color: #f1f5ee;
	border: 4px solid #fbfbfb;
}

.filterinput {
	outline: medium;
	margin-top: 8px;
	background-color: rgba(249, 244, 244, 0);
	border-radius: 15px;
	width: 90%;
	height: 30px;
	border: thin solid #FFF;
	text-indent: 0.5em;
	font-weight: bold;
	color: #FFF;
}

::-webkit-input-placeholder { /* WebKit browsers */
	color: #FFF;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #FFF;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #FFF;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
	color: #FFF;
}

#demo-list a {
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.item {
	display: block;
	text-decoration: none;
}

img {
	border: 0px solid #333;
	border-color: #FFFFFF;
	width: 80px;
	height: 80px;
}

.item p {
	cursor: pointer;
	margin: 0;
	font-weight: bold;
	text-align: left;
	color: #000000;
}

.zhou {
	float: left;
	width: 85%
}

.zhou2 {
	float: left;
	width: 10%
}

.zhou3 {
	width: 20%;
	float: left;
}

.zhou4 {
	width: 60%;
	float: left;
}

.search-btn {
	margin-top: 9px;
	display: inline-block;
	cursor: pointer;
	width: 30px;
	height: 30px;
	background: url(<c:url value = "/images/cashier/seach-icon-green.png"/>);
	/* background: url(<c:url value = "/images/cashier/seach-icon-green.png"/>); */
	background-size: 100%;
}

table {
	text-align: left;
	margin: 0px;
	padding: 0px;
}

tr {
	width: 100%;
	margin: 0px;
	padding: 0px;
	margin: 0px;
}

td {
	text-align: left;
	margin: 0px;
	padding: 0px;
	margin: 0px;
}

.input-add-min {
	background: #f1f5ee;
	border: 0;
	width: 40px;
	height: 15px;
	padding: 0px;
	margin: 0px;
	text-align: center;
	vertical-align: middle;
	float: left;
	line-height: 15px;
}

.div-add {
	-moz-user-select: none;
	cursor: pointer;
	text-align: center;
	width: 15px;
	height: 15px;
	line-height: 15px;
	border: 0;
	float: left;
}

.div-min {
	-moz-user-select: none;
	cursor: pointer;
	text-align: center;
	width: 15px;
	height: 25px;
	line-height: 15px;
	border: 0;
	float: left;
}

.img-add-min {
	cursor: pointer;
	width: 15px;
	height: 15px;
}

.shopping_cart_img {
	margin-top: 2px;
	cursor: pointer;
	width: 35px;
	height: 35px;
	vertical-align: middle;
}

.shopping_cart_red {
	cursor: pointer;
	vertical-align: middle;
	border-radius: 25px;
	background: red;
	color: #FFF;
}

.shopping_cart_part1 {
	position: fixed;
	left: 0;
	width: 25%;
	text-align: center;
}

.shopping_cart_part2 {
	position: fixed;
	left: 25%;
	width: 25%;
	text-align: center;
}

.shopping_cart_part3 {
	position: fixed;
	left: 50%;
	width: 25%;
	text-align: center;
}

.shopping_cart_part4 {
	position: fixed;
	left: 75%;
	width: 25%;
	text-align: center;
}
</style>
<script>
	
	//js模块
	$(document).ready(function() {
		flushShopCartNum();
		windowsSize();
		$(window).resize(function() {
			windowsSize();
		});
		//设置iframe的长宽
		init(0,9,'');
	});
	function windowsSize() {
		var a = $("#content_out").width();
		$("#content").css("width", a + 15);

		var b = $("#look1_out").width();
		$("#look1").css("width", b + 5);

	}

	function nofindPhoto(id) {

		var img = document.getElementById(id);
		//img.src="http://localhost:8080/appidnitjb322b2/jsp/cashier/images/shirt1.gif";
		img.src = "http://localhost:8080/appidnitjb322b2/images/zanwutupian.jpg";

		img.onerror = null;
		//img.style.display = 'none';
	}
	function test() {
		//alert($('.look1').height());
	}
	function inputKeyUp(value, materId, supId,materLevel,materValueUndressed,materValue,materProportion) {
        var rowData ;
        var a ;
        var dateone;
        dateone = '{"materId":"'+ materId+'","materNum":"'+value +'","materLevel":"'+materLevel + '","materProportion":"' + materProportion +'","materValue":"' + materValue+'","materValueUndressed":"' + materValueUndressed+'","supId":"'+ supId+'","custId":"${sessionScope.user.userId }"}';

        dataOneJson =JSON.parse(dateone);
        $.ajax({
            async : false,
            url : "<c:url value='/selectMobile/addShoppingCartForInput.do'/>" ,
            type : "post",
            dataType: "json",
            data: $.param(dataOneJson),
            success : function(data) {
                if(typeof(data)=='string'){
                    dataJson =JSON.parse(data);
                }else{
                    dataJson = data;
                }
                if(dataJson.success){
                    flushShopCartNum();
                    /* $.messager.alert('提示','成功放入购物车。','info');
                    $('#listDisplay2').datagrid('load'); */
                }else{
                    $.messager.alert('提示','购物车已有此种商品，请在购物车中修改数量！','info');
                }
            }
        });
    }
	function minimg( materId, supId,materLevel,materValueUndressed,materValue,materProportion) {
		
        var htmlInputValue =accSub($('#inputmater' + materId + '_' + supId).val(), 1);
        if(0>htmlInputValue){
        	return;
        }
        
		$('#inputmater' + materId + '_' + supId).val(htmlInputValue);
		var rowData ;
        var a ;
        var dateone;
        dateone = '{"materId":"'+ materId +'","materLevel":"'+materLevel + '","materProportion":"' + materProportion +'","materValue":"' + materValue+'","materValueUndressed":"' + materValueUndressed+'","supId":"'+ supId+'","custId":"${sessionScope.user.userId }"}';

        dataOneJson =JSON.parse(dateone);
        $.ajax({
            async : false,
            url : "<c:url value='/selectMobile/addShoppingCartForMin.do'/>" ,
            type : "post",
            dataType: "json",
            data: $.param(dataOneJson),
            success : function(data) {
                if(typeof(data)=='string'){
                    dataJson =JSON.parse(data);
                }else{
                    dataJson = data;
                }
                if(dataJson.success){
                	flushShopCartNum();
                    /* $.messager.alert('提示','成功放入购物车。','info');
                    $('#listDisplay2').datagrid('load'); */
                }else{
                    $.messager.alert('提示','购物车已有此种商品，请在购物车中修改数量！','info');
                }
            }
        });
	}
	function addimg( materId, supId,materLevel,materValueUndressed,materValue,materProportion) {
		$('#inputmater' + materId + '_' + supId).val(
				accAdd($('#inputmater' + materId + '_' + supId).val(), 1));
		
		var rowData ;
        var a ;
        var dateone;
        dateone = '{"materId":"'+ materId +'","materLevel":"'+materLevel + '","materProportion":"' + materProportion +'","materValue":"' + materValue+'","materValueUndressed":"' + materValueUndressed+'","supId":"'+ supId+'","custId":"${sessionScope.user.userId }"}';

        dataOneJson =JSON.parse(dateone);
        $.ajax({
            async : false,
            url : "<c:url value='/selectMobile/addShoppingCartForAdd.do'/>" ,
            type : "post",
            dataType: "json",
            data: $.param(dataOneJson),
            success : function(data) {
                if(typeof(data)=='string'){
                    dataJson =JSON.parse(data);
                }else{
                    dataJson = data;
                }
                if(dataJson.success){
                	flushShopCartNum();
                    /* $.messager.alert('提示','成功放入购物车。','info');
                    $('#listDisplay2').datagrid('load'); */
                }else{
                    $.messager.alert('提示','购物车已有此种商品，请在购物车中修改数量！','info');
                }
            }
        });
	}
	
	function flushShopCartNum(){
        var dataOneJson;
        var dateone;
        dateone = '{}';
        dataOneJson =JSON.parse(dateone);
        $.ajax({
            async : true,
            url : "<c:url value='/selectMobile/getShopCartNumForShop.do'/>" ,
            type : "post",
            dataType: "json",
            data: $.param(dataOneJson),
            success : function(data) {
                if(typeof(data)=='string'){
                    dataJson =JSON.parse(data);
                }else{
                    dataJson = data;
                }
                if(dataJson.success){
                	if(dataJson.num ==0){
                        $('.shopping_cart_red').html('');
                	} else {
                        $('.shopping_cart_red').html('&nbsp'+dataJson.num+'&nbsp');
                	}
                }
            }
        });
	}
	function init(materTypeName,supIdAll,materName) {
		materTypeName ='';
		supIdAll=9;
		materName='';
		var element_div = $("#products");
		
		//添加正在加载框
		element_div.append("<li id='loading'  style='font-weight: normal; color: black; font-size: 18px'> <img style='width: 15px;height: 15px;'  src='<c:url value='/images/gif/loading.gif'/>' />正在加载</li>");
		
		//element_div.innerHTML ="";
		var tableul = '';

		//var foodName = document.getElementById("search_food_id").value;
		var dataOneJson;
		var dateone;
		dateone = '{"limit_fist":"' + 20 + '","materTypeName":"'+materTypeName+'","supIdAll":"'+9+'","materName":"'+materName+'"}';
		dataOneJson = JSON.parse(dateone);
		$.ajax({
					async : true,
					url : "<c:url value='/selectMobile/initShoppingMaterForMobile.do'/>",
					type : "post",
					dataType : "json",
					data : $.param(dataOneJson),
					success : function(data) {
						if (typeof (data) == 'string') {
							dataJson = JSON.parse(data);
						} else {
							dataJson = data;
						}
						if (dataJson.success) {
							var materList = dataJson.materListForinit;
							if(materList.length==0&&$("#finish").html()==undefined  ){
								tableul = tableul +"<li id='finish'  style='font-weight: normal; color: black; font-size: 25px'> 购物车中没有商品..</li>"
							}else{
							    for (x in materList) {
								    tableul = tableul
										+ '<li onmouseout="this.style.border=\'4px solid #fbfbfb\'" onmouseover="this.style.border=\'4px solid red\'" onclick="test()">'
										+ '<table style="background: #FFF;border: 1px solid #f1f5ee;">'
										+ '<tr><td rowspan="3" width="90px"><img style="cursor: pointer;" onerror="nofindPhoto(\'2\');" id="1" src="<c:url value="/images/test/1.png"/>" /></td>'
										+ '<td width="90%">'
										+ '<p style="font-weight: normal; color: black; font-size: 18px">'
										+ materList[x].materName
										+ '<font size="3">('
										+ materList[x].unit
										+ ')</font></p>'
										+ '</td>'
										+ '<td width="20px">'
										+ '<div style="overflow: hidden; width: 73px; height: 15px; border: 0;">'
										+ '<div class="div-min" id="1l" onselectstart="return false;">'
										+ '<img class="img-add-min"  id="1" onclick="minimg(\''
                                        + materList[x].materId
                                        + '\',\''
                                        + materList[x].supId
                                        + '\',\''
                                        + materList[x].materLevel
                                        + '\',\''
                                        + materList[x].materValueUndressed
                                        + '\',\''
                                        + materList[x].materValue
                                        + '\',\''
                                        + materList[x].materProportion
                                        + '\')"'
										+ 'src="<c:url value="/images/cashier/min-icon.png"/>" />'
										+ '</div>'
										+ '<input class="input-add-min" maxlength="4"  value="'+materList[x].materNum+'" id="inputmater'
										+ materList[x].materId+'_'+
										+ materList[x].supId
										+ '"  type="tel" onkeyup="inputKeyUp(this.value,\''
										+ materList[x].materId
										+ '\',\''
										+ materList[x].supId
										+ '\',\''
                                        + materList[x].materLevel
                                        + '\',\''
                                        + materList[x].materValueUndressed
                                        + '\',\''
                                        + materList[x].materValue
                                        + '\',\''
                                        + materList[x].materProportion
										+ '\');">'
										+ '<div class="div-add"  id="1r" onselectstart="return false;">'
										+ '<img class="img-add-min"  id="1" onclick="addimg(\''
                                        + materList[x].materId
                                        + '\',\''
                                        + materList[x].supId
                                        + '\',\''
                                        + materList[x].materLevel
                                        + '\',\''
                                        + materList[x].materValueUndressed
                                        + '\',\''
                                        + materList[x].materValue
                                        + '\',\''
                                        + materList[x].materProportion
                                        + '\')" src="<c:url value="/images/cashier/add-icon.png"/>" />'
										+ '</div>'
										+ '</div>'
										+ '</td>'
										+ '</tr>'
										+ '<tr><td colspan="2">'
										+ '<p style="font-weight: normal; color: gray; font-size: 13px">'
										+ "品牌："
										+ materList[x].brands
										+ "    规格："
										+ materList[x].specifications
										+ '</p>'
										+ '</td></tr>'
										+ '<tr><td>'
										+ '<p style="font-weight: bold; color: red; font-size: 16px">￥'
										+ materList[x].materValueUndressed
										+ '</p>' + '</td></tr>'
										+ '<tr><td  style="text-align: right;"><p style="font-weight: normal; color: gray; font-size: 13px"> 添加留言</p></td><td style="text-align: left;" colspan="3"><input class="easyui-validatebox" style="width:90%;" id="materdategridList"  /></td></tr>'
										+ '</table></li>';
							    }
							}
							element_div.append(tableul);
							$('#loading').remove();//删除加载项
						}
					}
				});
	}
	function redirect(page){
        if(page==1){
            window.location.href = '<c:url value="/jsp-mobile/select/selectMater_mobile_test.jsp"/>';
        }else if(page==4){
            window.location.href = '<c:url value="/jsp-mobile/select/selectMater_mobile_shopping.jsp"/>';
        }
    }
	
	function addMater(){
		if($('#orderDate').datebox('getValue') ==''){
             $.messager.alert('提示','送货日期没有填写！','info');
             return ;
        }
		var form = new FormData();
        //ajax 提交表单数据
        form.append("orderDate", $('#orderDate').datebox('getValue')); // 可以增加表单数据
        // XMLHttpRequest 对象
        xhr = new XMLHttpRequest();
        xhr.open("post", '<c:url value='/order/commitMaterOrder.do'/>', true);
        xhr.onload = function(a) {
            window.location.reload();
        }; 
        xhr.send(form);
	}
</script>
</head>
<body style="margin: 0; padding: 0; height: 100%; background: #fbfbfb;">
	<!-- 主体部分 商品显示 -->

	<div class="look1_out" id="look1_out">
		<div class="look1" id="look1">
			<table width="97%">
				<tr>
					<td>
						<!-- <p class="icon iconfont icon-zhu" style="margin-left: 10px;">测试</p> -->
						<ul class="products" id='products'>
							<%-- <li onmouseout="this.style.border='4px solid #fbfbfb'" onmouseover="this.style.border='4px solid red'" onclick="test()">
								<table style="background: #FFF;border: 1px solid #f1f5ee;">
									<tr>
										<td rowspan="3" width="90px"><img
											style="cursor: pointer;" onerror="nofindPhoto('2');" id="1"
											src="<c:url value="/images/test/1.png"/>" /></td>
										<td width="90%">
											<p style="font-weight: normal; color: black; font-size: 18px">土豆 <font size="3">(斤)</font></p>
										</td>
										<td width="20px">
                                            <div style="overflow: hidden; width: 73px; height: 15px; border: 0;">
                                                <div class="div-min" id="1l" onselectstart="return false;">
                                                    <img class="img-add-min"  id="1" onclick="minimg('inputvalue1')"
                                                        src="<c:url value="/images/cashier/min-icon.png"/>" />
                                                </div>
                                                <input class="input-add-min" id="inputvalue1"  type='tel' onkeyup="inputKeyUp('inputvalue1');">
                                                <div class="div-add"  id="1r" onselectstart="return false;">
                                                    <img class="img-add-min"  id="1" onclick="addimg('inputvalue1')"
                                                        src="<c:url value="/images/cashier/add-icon.png"/>" />
                                                </div>
                                            </div>
                                        </td>
									</tr>
									<tr>
										<td colspan="2">
											<p style="font-weight: normal; color: gray; font-size: 13px">测试测试商品的名字测试商名字</p>
										</td>
									</tr>
									<tr>
										<td>
											<p style="font-weight: bold; color: red; font-size: 16px">￥1</p>
										</td>
									</tr>
								</table>
						</li> --%>
						</ul>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<!-- <div id='shopping_cart_date' class="shopping_cart_date">
            <font style="vertical-align: middle;" color="#7b7b7b" size="4">送货时间</font>
            <input style="vertical-align: middle;" class="easyui-datebox" name="orderDate" id="orderDate" editable="false" data-options="required:true" /> 
    </div> -->
	
	<div id='shopping_cart_finish' class="shopping_cart_finish">
	    <table class='table_cart' border="0" align="center" 
                style="cursor: pointer;height: 100%; width: 100%; color: #FFF;font-size:20px;text-align: center;" cellspacing="0" >
                <tr border="0">
                    <td style="text-align: center;"  width="70%" height="100%" bgcolor='#80d535'>送货时间<br><input style="vertical-align: middle;" class="easyui-datebox" name="orderDate" id="orderDate" editable="false" data-options="required:true" /></td>
                    <td onclick="addMater()" style="text-align: center;" id="guadan_button" width="30%" height="100%">提交</td>
                    <td></td>
                </tr>
        </table>
	</div>
	<div id="shopping_cart" class="shopping_cart">
		<div class="jquery-accordion-menu-header" id="form">
			<div class="shopping_cart_part1"  onclick="redirect(1);">
				<img class="shopping_cart_img" id="1"
					src="<c:url value="/images/cashier/home.png"/>" onclick="test();" />
				<p>
					<font color="#7b7b7b" size="1">主页</font>
				</p>
			</div>
			<div class="shopping_cart_part2">
				<img class="shopping_cart_img" id="1"
					src="<c:url value="/images/cashier/sale.png"/>" />
				<p>
					<font color="#7b7b7b" size="1">促销</font>
				</p>
			</div>
			<div class="shopping_cart_part3">
				<img class="shopping_cart_img" id="1"
					src="<c:url value="/images/cashier/mine.png"/>" />
				<p>
					<font color="#7b7b7b" size="1">我的</font>
				</p>
			</div>
			<div class="shopping_cart_part4">
				<img class="shopping_cart_img" id="1" src="<c:url value="/images/cashier/shopping.png"/>" /> 
				<span class="shopping_cart_red"></span>
				<p>
					<font color="#7b7b7b" size="1">购物车</font>
				</p>
			</div>
		</div>
		<!-- <span class="12314" style="border-radius:25px;;background:red; "> &nbsp121&nbsp</span> -->
	</div>
</body>
</html>